<template>
  <div>
    <div class="left">
      <h1>数据如下：</h1>
      <pre>
        {{kaodianList}}
      </pre>
    </div>
    <div class="right">
      <el-input @keyup.native.enter="go" v-model.trim="value" placeholder="请输入point_rule"></el-input>
      <div>父分类名称：{{parentName}}</div>
    </div>
  </div>
</template>

<script>
import data from '../../data/parent_child_data.json'
export default {
  data() {
    return {
      kaodianList: data.data,
      value: '/71/72/75',
      parentName: ''
    }
  },
  methods: {
    go() {
      if (this.value) {
        // 把  '/71/72/75'  转成  [71,72,75]  数组
        const arr = this.value.substr(1).split('/')
        // 所有的数据的数组
        let data = this.kaodianList
        let dataA // 找出来的数据
        let val // 每次从数组中取出的值
        // 当数组中还有元素时就一直循环
        while (arr.length > 0) {
          // 从数组中取出第1个元素并从数组中删除
          val = arr.shift()
          // 到数据中根据这个ID找出这条记录
          dataA = data.find(v => v.id == val)
          // 让 data 等于这条记录的 child
          data = dataA.child
        }
        // 显示找出来的父分类的名称
        this.parentName = dataA.name
      }
    }
  }
}
</script>

<style>
.left {
  width: 400px;
  float: left;
  border: 1px solid #eee;
}
.right {
  padding: 200px 50px;
  float: left;
}
</style>
